<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>New Tables</title>
<!--     <link href="siteag.css" rel="stylesheet">
<link href="juc.css" rel="stylesheet"> -->

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.validate.js" type="text/javascript"></script>
<script src="jquery-ui.js" type="text/javascript"></script>
<!-- <link href="ja.css" rel="stylesheet">
    <script src="jquery.appendGrid-1.3.6.js"></script>
    <script src="jqueryvalidate.js"></script> -->
    
    
<link href="css/bootstrap.css" rel="stylesheet">

<style>
#myFormSI {
	width: 650px;
		
}
label.error {
	color: red;	
}
</style>

<script id="jsSource" type="text/javascript">
	var oadbSI = [];
	var oaformSI = [];
	var m = 1;

	function latestFormSI(myFormSI) {
		console.log(":: latestFormSI:myFormSI ::" + JSON.stringify(myFormSI));
		var localoaformSI = [];
		oaformSI = [];
		var x2 = myFormSI;
		//alert(":: x2 ::" + x2.length);

		for (i = 0, j = 1; i < x2.length; i = i + 3, j++) {
			var obj = {};
			var x3 = x2.slice(i, i + 3);
			console.log(":: x3 ::" + JSON.stringify(x3));
			obj.sid = j;
			obj.did = x3[0].name.split('_')[1];
			obj.id = x3[0].value;
			//2nd change - start
			obj.sourceName = x3[1].value;	
			obj.percentage = x3[2].value;
			//2nd change - end
			obj.createdBy=null;
			obj.updatedBy=null;
			obj.customerid=null;
			obj.creationDate=null;
			obj.modificationDate=null;
			//obj.role = null;
			
			localoaformSI.push(obj);
		}

		oaformSI = localoaformSI;
		console.log(":: oaformSI ::" + JSON.stringify(oaformSI));
		 /* $("#myBodySI").empty();
		$.each(oaformSI,function(i, item) {
			var tblColumnId = "tblColumnIdSI_"+ item.did;
			var tblColumnSN = "tblColumnSNSI_"+ item.did;
			var tblColumnId = "tblColumnIdSI_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodySI").append("<tr id='tblColumnTRSI_"+item.did+"'><td>"+ item.sid+ "</td><td style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveSIRow' onclick='rmvRow(tblColumnTRSI_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		});  */
		//return oaformSI;
	}

	function convertform(myFormSI) {
		console.log(":: convertform:myFormSI ::" + JSON.stringify(myFormSI));
		var localoaformSI = [];
		oaformSI = [];
		var x2 = myFormSI;
		//alert(":: x2 ::" + x2.length);

		for (i = 0; i < x2.length; i = i + 3) {
			var obj = {};
			var x3 = x2.slice(i, i + 3);
			console.log(":: x3 ::" + JSON.stringify(x3));
			//obj.sid = j;
			//obj.did = x3[0].name.split('_')[1];
			obj.id = x3[0].value;
			//3rd change - start
			obj.sourceName = x3[1].value;	
			obj.percentage = x3[2].value;
			//3rd change - end
			obj.createdBy=null;
			obj.updatedBy=null;
			obj.customerid=null;
			obj.creationDate=null;
			obj.modificationDate=null;
					
			//obj.role = null;
			
			localoaformSI.push(obj);
		}

		oaformSI = localoaformSI;
		console.log(":: oaformSI ::" + JSON.stringify(oaformSI));
		 /* $("#myBodySI").empty();
		$.each(oaformSI,function(i, item) {
			var tblColumnId = "tblColumnIdSI_"+ item.did;
			var tblColumnSN = "tblColumnSNSI_"+ item.did;
			var tblColumnId = "tblColumnIdSI_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodySI").append("<tr id='tblColumnTRSI_"+item.did+"'><td>"+ item.sid+ "</td><td style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveSIRow' onclick='rmvRow(tblColumnTRSI_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		});  */
		//return oaformSI;
	}
	
	function latestdbSI(mydb) {
		var localoadbSI = [];
		oadbSI = [];
		var x2 = mydb;
		//alert(":: x2 ::" + x2.length);
			
			$.each(mydb, function(i, item) {
				var obj = {};
				
				obj.sid = i+1;
				obj.did = m;
				obj.id = item.id;
                //3th change - start
				obj.sourceName = item.sourceName;
				obj.percentage = item.percentage;
				//3th change - start 
				obj.createdBy=null;
				obj.updatedBy=null;
				obj.customerid=null;
				obj.creationDate=null;
				obj.modificationDate=null;
				//obj.role = null;
				
				localoadbSI.push(obj);
				m++;
			});

		oadbSI = localoadbSI;
		console.log(":: oaformSI ::" + JSON.stringify(oadbSI));
		
	/* 	$.each(oadbSI,function(i, item) {
			var tblColumnId = "tblColumnIdSI_"+ item.did;
			var tblColumnSN = "tblColumnSNSI_"+ item.did;
			var tblColumnId = "tblColumnIdSI_"+ item.did;
			var tblColumnFN = "tblColumnFN_"+ item.did;
			var tblColumnPWD = "tblColumnPWD_"+ item.did;
			var tblColumnLN = "tblColumnLN_"+ item.did;
			var tblColumnE = "tblColumnE_"+ item.did;
			$("#myBodySI").append("<tr id='tblColumnTRSI_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnFN+"' value='"+item.firstname+"' required='' /></td><td><input type='text' name='"+tblColumnLN+"' value='"+item.lastname+"' required='' /> </td><td><input type='text' name='"+tblColumnE+"' value='"+item.emailid+"' required='' /> </td><td><input type='text' name='"+tblColumnPWD+"' value='"+item.password+"' required='' /></td><td><button id='btnRemoveSIRow' onclick='rmvRow(tblColumnTRSI_"+ item.did+ ","+ item.id+ ")'>Remove Current Row</button></td></tr>");
			//m++;
		}); */
		//return oaformSI;
	}
	
	function rmvRow(j, k) {
		var match, xcc;
		if(j.id != undefined){
			console.log(":: j.id ::" + j.id + ":: k ::" + k);
			$("#" + j.id).remove();
			xcc = j.id.split('_')[1];
		}
		else{
			console.log(":: JSON.stringify(j) ::" + JSON.stringify(j) + ":: k ::" + k);
			$("#" + j).remove();
			xcc = j.split('_')[1];
		}
		
		
		console.log(":: oaformSI ::" + JSON.stringify(oaformSI));
		console.log(":: xcc ::" + xcc);
		$.each(oaformSI,function(i, item) {
			console.log(":: item.did ::" + item.did);
			if(item.did == xcc) match=item.sid;
		});
		console.log(":: match ::" + match);
		oaformSI.splice(match, 1);
		var z = ($("#myFormSI").serializeArray().length) / 3;
		var usl1 = oadbSI.length;
		var lchk1 = usl1 == z;
		if (lchk1)
			$("#btnRemoveSI").prop('disabled', true);
		else
			$("#btnRemoveSI").prop('disabled', false);

		var x2 = $("#myFormSI").serializeArray();
		latestFormSI(x2);

		if (k != 0){
			$.get("customer/deleteSourceIncomeById", {
				id : k
			}, function(data) {

			});
			var cId= '${custId}';
			$.get("customer/getAllSourceIncome",{id:cId},function(data) {
				
				latestdbSI(data);
				var d = ($("#myFormSI").serializeArray().length) / 3;
				l = data.length;
				var r = l == d;
				if (r)
					$("#btnRemoveSI").prop('disabled', true);
				else
					$("#btnRemoveSI").prop('disabled', false);

				var x2 = $("#myFormSI").serializeArray();
				latestFormSI(x2);
			});
			
		}
	}
	
	$.validator.setDefaults({
		submitHandler : function() {

			var x2 = $("#myFormSI").serializeArray();
			convertform(x2);
			console.log(":: submitHandler:oaformSI ::"+JSON.stringify(oaformSI));
			var cId= '${custId}';
			var oaformSIn = JSON.stringify(oaformSI);
			//var x = {businessNatures:oaformSIn,custId:cId};
			var x = {sourceIncome:oaformSI,custId:cId};
			$.ajax({
				headers : {
					'Accept' : 'application/json',
					'Content-Type' : 'application/json; charset=utf-8'
				},
				type : "POST",
				url : "customer/saveAllSourceIncome",
				contentType : "application/json; charset=utf-8",
				data : JSON.stringify(x),
				async : false, //Cross-domain requests and dataType: "jsonp" requests do not support synchronous operation
				cache : false, //This will force requested pages not to be cached by the browser          
				processData : false,
				success : function(resposeJsonObject) {
					//$("#myFormSI").attr("action", "businessNature");
					console.log(":: resposeJsonObject ::"+JSON.stringify(resposeJsonObject));
					latestdbSI(resposeJsonObject);
					$("#myBodySI").empty();
					$.each(oadbSI,function(i, item) {
						var tblColumnId = "tblColumnIdSI_"+ item.did;
						var tblColumnSN = "tblColumnSNSI_"+ item.did;
						//5th change - start
						var tblColumnSoN = "tblColumnSoNSI_"+ item.did;
						var tblColumnP = "tblColumnPSI_"+ item.did;
						$("#myBodySI").append("<tr  class='warning' id='tblColumnTRSI_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnSoN+"' value='"+item.sourceName+"' required='' /></td><td><input type='text' name='"+tblColumnP+"' value='"+item.percentage+"' required='' /> </td><td><button id='btnRemoveSIRow' onclick='rmvRow(tblColumnTRSI_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
						//5th change - end
					});
					
				}
			});
		}
	});


	$(document).ready(function() {
		                var cId= '${custId}';
						var l = 0;
						

						$("#myFormSI").validate();
				

						$.get("customer/getAllSourceIncome",{id:cId},function(data) {
											
											latestdbSI(data);
											
											
											$.each(oadbSI,function(i, item) {
												var tblColumnId = "tblColumnIdSI_"+ item.did;
												//6th change - start 
												var tblColumnSN = "tblColumnSNSI_"+ item.did;
												var tblColumnSoN = "tblColumnSoNSI_"+ item.did;
												var tblColumnP = "tblColumnPSI_"+ item.did;
												$("#myBodySI").append("<tr  class='warning' id='tblColumnTRSI_"+item.did+"'><td>"+ item.sid+ "</td><td  style='display: none'>"+ item.did+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='"+item.id+"' /></td><td><input type='text' name='"+tblColumnSoN+"' value='"+item.sourceName+"' required='' /></td><td><input type='text' name='"+tblColumnP+"' value='"+item.percentage+"' required='' number='true'/> </td><td><button id='btnRemoveSIRow' onclick='rmvRow(tblColumnTRSI_"+ item.did+ ","+ item.id+ ")' class='btn btn-default' title='Delete from DB'><span class='glyphicon glyphicon-trash'></span></button></td></tr>");
												//6th change - end 
												//m++;
											});
											
											
											
											var d = ($("#myFormSI").serializeArray().length) / 3;
											l = data.length;
											var r = l == d;
											if (r)
												$("#btnRemoveSI").prop('disabled', true);
											else
												$("#btnRemoveSI").prop('disabled', false);

											var x2 = $("#myFormSI").serializeArray();
											latestFormSI(x2);
										});

						
						
						$("#btnSubmitSI").click(function() {
                                            console.log("m"+m);
											var tblColumnSN = "tblColumnSNSI_"+ m;
											var tblColumnId = "tblColumnIdSI_"+ m;
											//7th change - start 
											var tblColumnSoN = "tblColumnSoNSI_"+ m;
											var tblColumnP = "tblColumnPSI_"+ m;
											//7th change - end 
											var d = $("#myFormSI").serializeArray().length;
											var d1=(d/3)+1;
											//8th change - start 
											$("#myBodySI").append("<tr class='warning' id='tblColumnTRSI_"+m+"'><td>"+d1 + "</td><td  style='display: none'>"+ m+ "</td><td style='display:none'><input type='hidden' name='"+tblColumnId+"' value='' /></td><td><input type='text' name='"+tblColumnSoN+"' value='' required='' /></td><td><input type='text' name='"+tblColumnP+"' value='' required='' number='true'/> </td><td><button id='btnRemoveSIRow' type='button' onclick='rmvRow(tblColumnTRSI_"+ m+ ",0)' class='btn btn-default' title='Delete from Browser'><span class='glyphicon glyphicon-remove'></span></button></td></tr>");
											//8th change - end 
											m++;

											var d2 = $("#myFormSI").serializeArray().length;
											l = oadbSI.length;
											var r = l == d2;
											if (r)
												$("#btnRemoveSI").prop('disabled', true);
											else
												$("#btnRemoveSI").prop('disabled', false);
											var x2 = $("#myFormSI").serializeArray();
											latestFormSI(x2);

										});
						
						
						
						$("#btnRemoveSI").click(function() {

							var x2 = $("#myFormSI").serializeArray();
							latestFormSI(x2);
							
							var forml = oaformSI.length;
							
							console.log(":: oaformSI[forml-1].did ::"+oaformSI[forml-1].did);
							console.log(":: z ::"+forml);
							
							$.get("customer/getAllSourceIncome",{id:cId},function(data) {
								
								latestdbSI(data);
							});
							var dbl = oadbSI.length;
							
							console.log(":: dbl ::"+dbl);
							
							var lchk1 = forml == dbl;
							
							console.log(":: lchk1 ::"+lchk1);
							
							if (lchk1)
								$("#btnRemoveSI").prop('disabled', true);
							else{
								$("#tblColumnTRSI_" + oaformSI[forml-1].did).remove();
								$("#btnRemoveSI").prop('disabled', false);
							}

							m--;

						});

					});
</script>
</head>
<body>
	<div align="center">

		<form id="myFormSI" novalidate="novalidate" action="">
			<div id="divSource">
			<br>
				<table id="myTable" class="table table-hover">
					
						<tr>
						    <th>S. No.</th>
							<th style="display: none">U. No.</th>
							<th style="display: none">id</th>
                            <!--1st change - start -->
							<th>Source Name</th>
							<th>Percentage</th>
							<!--1st change - end -->
							<th>Actions</th>
						</tr>
					
					<tbody id="myBodySI">

					</tbody>
				</table>
				<button type="button" id="btnSubmitSI" class='btn btn-default' title='Add new row to Browser'> <span class="glyphicon glyphicon-plus"></span> New Row</button>
			<button type="button" id="btnRemoveSI" class='btn btn-default' title='Remove last row from Browser'> <span class="glyphicon glyphicon-remove"></span> Last Row</button>
			<button type="submit" id="btnSaveAllSI" class='btn btn-default' title='Save all rows to DB'> <span class="glyphicon glyphicon-floppy-disk"></span> All Rows</button>
			<!-- <input id="btnSaveAllSI" type="submit" value="Save All Rows"/> -->
				

			</div>
			
		</form>

	</div>

</body>
</html>